<template>
  <Modal v-model="modal" :title="title">
    <div class="h400 scroll">
      <h3>请选择解约的品牌，解约后该经销商该品牌会清出部门管理，和其下属门店的签约关系也解除，该经销商的这个品牌的商品也下架且不能再次上架</h3>
      <Row>
        <div class="mt mb">
          <Checkbox
            :indeterminate="indeterminate"
            :value="checkAll"
            @click.prevent.native="handleCheckAll"
          >全选</Checkbox>
        </div>
        <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
          <Checkbox v-for="item in list" :label="item.id" :key="item.id"><span>{{item.currentBrandName}}</span></Checkbox>
        </CheckboxGroup>
      </Row>
    </div>
    <div slot="footer">
      <Button @click="modal = false" size="large" type="text">取消</Button>
      <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">解约</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  data() {
    return {
      id: null,
      modal: false,
      title: "解约",
      row: {},
      indeterminate: false,
      checkAll: false,
      checkAllGroup: [],
      list: []
    };
  },
  methods: {
    getData(distributorId) {
      this.id = distributorId
      this.$ajaxGet('/distributor/contract/getContractBrands', { distributorId }).then(res =>{
        this.list = res.map(item => {
          const { currentBrandId, currentBrandName, id } = item
          return { currentBrandId, currentBrandName, id }
        })
      })
    },
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false;
      } else {
        this.checkAll = !this.checkAll;
      }
      this.indeterminate = false;

      if (this.checkAll) {
        this.checkAllGroup = this.list.map(item => item.id);
      } else {
        this.checkAllGroup = [];
      }
    },
    checkAllGroupChange(data) {
      if (data.length === this.list.length) {
        this.indeterminate = false;
        this.checkAll = true;
      } else if (data.length < this.list.length && data.length > 0) {
        this.indeterminate = true;
        this.checkAll = false;
      } else {
        this.indeterminate = false;
        this.checkAll = false;
      }
    },
    openModal(row) {
      this.row = row;
      this.modal = true;
      this.checkAll = false
      this.list = []
      this.getData(row.distributorId)
    },
    closeModal() {
      this.modal = false;
    },
    onSave() {
      this.$ajaxPost('/distributor/contract/releaseContract', {
        distributorId: this.row.distributorId,
        distributorContractIds: this.checkAllGroup
      }).then(res => {
        this.$Message.info('解约成功')
        this.$emit('complete')
        this.closeModal()
      })
    },
  }
};
</script>

